<!DOCTYPE html>
<html>
<haad>
	<meta charset="utf-8" />
	<title>分期总图管理</title>
	<link rel="stylesheet" type="text/css" href="css/style.css" />
</haad>

<body style="background: #000;">

<div id="titleBar" class="map-titleBar">
	分期总图编辑
	<div class="map-titleBar-menu">
		<a href="/stageMap.html" target="_blank">查看总图</a>
	</div>
	<span id="instruction" class="instruction">
		<img src="images/new2.gif" height="10" />
		使用说明
	</span>
</div>
<div id="type" class="map-side">
	<dl class="map-side-box">
		<dt>上传图片</dt>
		<dd><input type="file" name="myfile" id="myfile"/></dd>
	</dl>
	<dl class="map-side-box">
		<dt>折线绘制</dt>
		<dd><button id="btn_drawPath">绘制折线图</button></dd>
		<dd><button id="btn_drawPath2">绘制折线图(换颜色)</button></dd>
		<dt>划线</dt>
		<dd>
		<input id="txt_pointText" type="text" name="" placeholder="输入标注点文字信息" />
		<button id="btn_drawPoint">添加标注点</button>
		</dd>
	</dl>
	<dl class="map-side-box">
		<dt>保存</dt>
		<dd>
			<button id="btn_save">保存数据</button>
		</dd>
	</dl>
</div>

<div id="Map" style="" class="map-main">

</div>

<!--++++++++++++++++++++++++-->
<div id="instructionDialog" class="instructionDialog">
	<div class="instructionDialog-close" id="btn_instructionDialogClose">X</div>
	<div class="instructionDialog-content">
		<span>1.绘制折线图时，可以按住space键移动画布，然后放开space键可继续绘制；</span>
		<span>2.绘制折线图过程中，双击左键结束绘制；</span>
		<span>3.在图形上单击右键,可以删除图形；</span>
		<label>
			<a href="http://www.github.com/flybirdsoft" target="_blank">设计开发：邬畏畏 </a>&nbsp;
			<a href="http://www.isoftstone.com/" target="_blank">iSoftstone</a>
		</label>
	</div>
</div>

<div id="mask" class="mask">
	<div class="mask-opacity"></div>
	<div class="mask-text">正再载入中....</div>
</div>
</body>
</html>
<script type="text/javascript" src="js/jquery.3.3.1.min.js"></script>
<script type="text/javascript" src="js/wGraph.js"></script>
<script type="text/javascript">
/*
write by wuweiwei
*/
var pointConfig = {
	"url" : "images/point.png",
	"width" : 50,
	"height" : 50,
	"color" : "#F00"
};
var pathConfig = {
	"stroke":"#FFFF00",
	"strokeWidth":"2",
	"fill":"#ffff00"
};

var App = {
	init : function(){
		this.getData();
		this.initComponent();
		this.bindEvent();
		this.svg = document.getElementsByTagName("svg")[0];
	},
	getData : function(){

	},
	initComponent : function(){
		upLoader.upload(document.getElementById("myfile"),"/restful/upload",function(e){
			console.log(this.xhr.responseText);
		});

		/*初始化图形组件*/
		wGraph.init({
			container:document.getElementById("Map"),
			src : "uploadFiles/3.jpg",
			isZoom : false,
			pathConfig : pathConfig,
			pointConfig :pointConfig,
			onimageinit : function(){
				mask.style.display = "block";
			},
			onimageload : function(){
				setTimeout(function(){
					mask.style.display = "none";
				},300);
				
			}
		});

		wGraph.ondblclick = function(e){
			this.svg.style.cursor = "move";
		}
	},
	setCursorMove : function(){
		this.svg.style.cursor = "move";
	},
	setCursorDraw : function(){
		this.svg.style.cursor = "crosshair";
	},
	bindEvent : function(){
		var th = this;
		btn_drawPath.onclick = function(){
			th.setCursorDraw();
			wGraph.addPath();
		}
		btn_drawPath2.onclick = function(){
			// wGraph.setPathConfig({
			// 	"fill":"#0f0"
			// });
			wGraph.addPath({
				"fill":"#00f"
			});
		}		
		btn_drawPoint.onclick = function(){
			wGraph.addPoint(txt_pointText.value);
		}

		instruction.onclick = function(e){
			instructionDialog.style.display = "block";
		}
		btn_instructionDialogClose.onclick = function(){
			instructionDialog.style.display = "none";
		}

		btn_save.onclick = function(e){
			var svgContainer = document.getElementById("svgContainer");
			var html = svgContainer.innerHTML;
			localStorage.setItem("svg",html);
		}
	}
};App.init();
</script>
